<template>
	<view>
		<view class="topBgcBox">
			<view class="userInfo" v-if="userInfo.nickName == ''">
				<image class="avatar" src="../../static/mine/avatar.png" mode="widthFix"></image>
				<u-button size="mini" plain type="primary" customStyle="margin-top: 5px">点击登录</u-button>
			</view>
			<view class="userInfo" v-else>
				<image class="avatar" :src="userInfo.avatar" mode="widthFix"></image>
				<view class="nickName">{{userInfo.nickName}}</view>
			</view>
		</view>
		<view class="mineContent">
			<view class="mineMimiFunContent myboxShadow">
				<view class="funBox" v-for="(item,index) in funArray" :key="index" @click="miniFunNav(item.nav)">
					<image class="funIma" :src="item.src" mode="widthFix"></image>
					<view class="funText">{{item.text}}</view>
				</view>
			</view>
			<view class="mineFunContent myboxShadow">
				<u-cell-group :border="false">
					<u-cell icon="setting-fill" title="我的发布" :isLink="true" size="large" url="./myFabu"></u-cell>
					<u-cell icon="integral-fill" title="使用反馈" :isLink="true" size="large" url="./feedBack"></u-cell>
				</u-cell-group>
			</view>
			<button open-type="contact" class="contactBtn myboxShadow">在线客服</button>
		</view>
	</view>
</template>

<script>
	import request from "@/utills/request.js"
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: ''
				},
				funArray: [{
					src: '../../static/mine/message.png',
					text: '消息',
					nav: './message'
				}, {
					src: '../../static/mine/message.png',
					text: '我的留言',
					nav: './myRelease'
				}]
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			miniFunNav(src) {
				uni.navigateTo({
					url: src
				})
			},
			loginOut() {
			},
			async getUserInfo() {
				let res = await request({
					method: 'get',
					url: 'user/getUserInfo'
				})
				// console.log(res);
				if (res.data.code == 200) {
					this.userInfo.avatar = res.data.data.avatarUrl
					this.userInfo.nickName = res.data.data.nickName
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eff5f6;
	}

	//button按钮去除边框
	button::after {
		border: initial;
	}

	.topBgcBox {
		position: relative;
		height: 180px;
		width: 100%;
		background: linear-gradient(#1565C0, #039BE5);
		z-index: -99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.userInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40px;
	}

	.avatar {
		height: 80px;
		width: 80px;
		border-radius: 50%;
	}

	.nickName {
		font-size: 18px;
		color: white;
		margin-top: 5px;
	}

	.mineContent {
		padding: 0 15px;
	}

	.mineMimiFunContent {
		height: 90px;
		padding: 0 30px;
		background-color: #fff;
		border-radius: 8px;
		margin: -45px auto 0;
		display: flex;
		// justify-content: space-between;
		justify-content: space-around;
		flex-direction: row;
	}

	.funBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.funIma {
		height: 32px;
		width: 32px;
	}

	.funText {
		margin-top: 5px;
		font-size: 14px;
	}

	.mineFunContent {
		background-color: #fff;
		border-radius: 8px;
		margin-top: 20px;
	}

	.contactBtn {
		margin-top: 20px;
		background-color: #fff;
	}
</style>
